<template>
  <div>
    <!-- 顶部栏 -->
    <van-nav-bar
      title="订单详情"
      left-text="返回"
      left-arrow
      fixed
      @click.left.native="$router.go(-1)"
    >
    </van-nav-bar>
    <div class="exists_order" style="padding: 0 2vw">
      <van-steps :active="progress">
        <van-step>买家下单</van-step>
        <van-step>商家接单</van-step>
        <van-step>买家提货</van-step>
        <van-step>交易完成</van-step>
      </van-steps>
      <div class="opt">
        <div>
          <div class="van-ellipsis">天津滨海塘沽大港天河外包园外的</div>
          <div class="van-ellipsis">由天津滨海金鹰嘉品MALL PRO 店配送</div>
        </div>
        <div>
          <img src="../assets/imgs/order/mobile.png" alt="" />
        </div>
      </div>
      <van-card
        num="2"
        price="2.00"
        desc="热/标准甜"
        title="青桔柠檬茶"
        :thumb="require('../assets/imgs/default_head.jpg')"
        thumb-link=""
        :centered="true"
        origin-price="10.00"
      />
      <div class="pay-inf">
        <div>
          <span>保温袋</span>
          <span>￥2.00</span>
        </div>
        <div>
          <span>配送费</span>
          <span>￥5.00</span>
        </div>
        <div>
          <span>新人外卖券</span>
          <span>-￥5.00</span>
        </div>
        <div>
          <span>减配送费</span>
          <span>-￥3.00</span>
        </div>
        <div>
          <span>支付方式</span>
          <span>微信支付</span>
        </div>
        <div>
          <span>微信支付</span>
          <span>￥17.00</span>
        </div>
        <div>
          <span>实付</span>
          <span>￥17.00</span>
        </div>
      </div>
      <div class="pay-inf">
        <div>
          <span>下单时间</span>
          <span>2022.10</span>
        </div>
        <div>
          <span>下单门店</span>
          <span>天津滨海</span>
        </div>
        <div>
          <span>订单号</span>
          <span>1105112416</span>
        </div>
        <div>
          <span>收货地址</span>
          <span>天津滨海塘沽</span>
        </div>
        <div>
          <span>取单号</span>
          <span>2003</span>
        </div>
        <div>
          <span>备注</span>
          <span>无</span>
        </div>
        <div>
          <span>温馨提示</span>
          <span>如有售后问题请联系门店</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      progress: 1,
    };
  },
};
</script>

<style lang="scss" scoped>
// 当前订单存在
.exists_order {
  margin-top: 46px;
  background-color: #f3f4f5;
  .opt {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2vw;
    margin-top: 2vw;
    background-color: #fff;
    div:nth-child(1) {
      .van-ellipsis:nth-child(1) {
        width: 70vw;
        font-size: 5vw;
        font-weight: bold;
      }
      .van-ellipsis:nth-child(2) {
        width: 70vw;
        font-size: 3.5vw;
        color: #999c9a;
        margin-top: 1vw;
      }
    }
    div:nth-child(2) {
      width: 15vw;
      img {
        width: 100%;
        display: block;
      }
    }
  }
  .pay-inf {
    background-color: #fff;
    margin-top: 2vw;
    font-size: 3.5vw;
    padding: 3vw;
    div {
      display: flex;
      justify-content: space-between;
      margin-top: 1vw;
      padding: 1vw;
    }
  }
  .del {
    padding-top: 5vw;
    margin-bottom: 50px;
    text-align: center;
    background-color: #fff;
    button {
      border: 0;
      padding: 1vw 6vw;
      border-radius: 1vw;
      border: 1px solid #cfcfcf;
      background-color: #fff;
      font-size: 4vw;
    }
  }
}
</style>